function autocomplete($){
    $.fn.autocomplete = function(params) {
        
        //Selections
        var currentSelection = -1;
        var currentProposals = [];
        
        //Default parameters
        params = $.extend({
            hints: [],
            placeholder: '请输入配件号或德科号',
            width: 200,
            height: 16,
            btnwidth:0,
            showButton: true,
            buttonText: '',
            onSubmit: function(text){},
            onBlur: function(){}
        }, params);

        //Build messagess
        this.each(function() {
            //Container
            var searchContainer = $('<div></div>')
                .addClass('autocomplete-container')
                .css('height', params.height);

            //Text input
            var input = $('<input type="text" autocomplete="off" name="query">')
                .attr('placeholder', params.placeholder)
                .addClass('autocomplete-input')
                .css({
                    'width' : params.width - params.btnwidth,
                    'height' : params.height 
                });

            if(params.showButton){
                //input.css('border-radius', '3px 0 0 3px');
            }

            //Proposals
            var proposals = $('<div></div>')
                .addClass('proposal-box')
                .css('width', params.width - params.btnwidth)
                .css('visibility','hidden')
                .css('top', input.height() + 3);
            var proposalList = $('<ul></ul>')
                .addClass('proposal-list');

            proposals.append(proposalList);
                
            input.bind("change paste keyup", function(e){
                $(".proposal-box").css('visibility','visible');
                if(e.which != null && e.which != 13 && e.which != 27
                        && e.which != 38 && e.which != 40){             
                    currentProposals = [];
                    currentSelection = -1;
                    proposalList.empty();
                    if(input.val() != ''){
                        var word = "^" + input.val() + ".*";
                        proposalList.empty();
                        for(var test in params.hints){
                            if(params.hints[test].match(word)){
                                currentProposals.push(params.hints[test]);  
                                var element = $('<li></li>')
                                    .html(params.hints[test])
                                    .addClass('proposal')
                                    .click(function(){
                                        input.val($(this).html());
                                        proposalList.empty();
                                        $(".proposal-box").css('visibility','hidden');
                                        params.onSubmit(input.val());
                                    })
                                    .mouseenter(function() {
                                        $(this).addClass('selected');
                                    })
                                    .mouseleave(function() {
                                        $(this).removeClass('selected');
                                    });
                                proposalList.append(element);
                            }
                        }
                    }
                }
            });
            
            input.blur(function(e){
                currentSelection = -1;
                //proposalList.empty();
                params.onBlur();
            });
            
            searchContainer.append(input);
            searchContainer.append(proposals);      
            
            if(params.showButton){
                //Search button
                var button = $('<div></div>')
                    .addClass('autocomplete-button')
                    .html(params.buttonText)
                    .css({
                        'height': params.height + "px",
                        'line-height': params.height + "px"
                    })
                    .click(function(){
                        proposalList.empty();
                        params.onSubmit(input.val());
                    });
                if(params.btnwidth){
                    button.css({width:params.btnwidth});
                }
                if(params.buttonText){
                    button.html(params.buttonText);
                }

                searchContainer.append(button); 
            }
    
            $(this).append(searchContainer);    
            
            if(params.showButton){
                //Width fix
                searchContainer.css('width', params.width );
            }
        });
        
       return this;
    };
}
if("function"==typeof define && define.amd && define){
    define(['zepto'],function($){
        autocomplete($);
    });
}